/* @update: 2015-2-3 23:39:39 */ 
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-moz-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-ms-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg)
}
}
body, canvas, div {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	webkit-tap-highlight-color: transparent
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden
}
canvas {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -o-crisp-edges;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor
}
.white {
	color: #fff
}
.red {
	color: #ee4242
}
.btn {
	background-color: #ee4242;
	border-bottom: 3px solid #b23232;
	border-radius: 8px;
	overflow: hidden;
	color: #fff
}
.btn:active {
	background-color: #dc3131
}
.btn-orange {
	background-color: #ff8e20;
	border-bottom: 3px solid #bf6a18
}
.btn-orange:active {
	background-color: #fe830c
}
.bkg-layer, .main-layer {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0
}
.loaderLayer {
	background-color: #d4b675;
	z-index: 10
}
.shareLayer {
	background: rgba(0,0,0,0.8) url(img/share-text.png) no-repeat center 20px;
	background-size: 90% auto;
	z-index: 500;
	display: none
}
.rankLayer, .ruleLayer, .telLayer, .prizeLayer, .shareLayerNotWx {
	background-color: rgba(0,0,0,0.8);
	z-index: 500;
	display: none
}
.board-box {
	width: 90%;
	height: 50%;
	background-color: #f1fdde;
	border: 9px solid #ab8a47;
	border-radius: 10px;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}
.rankLayer .bkg-layer {
	overflow: hidden
}
.rankLayer .bkg-light {
	width: 885px;
	height: 885px;
	background: url(../res/resultLayer/result-light.png) no-repeat center center;
	background-size: 100% 100%;
	position: absolute;
	left: 50%;
	margin-left: -442px;
	top: 50%;
	margin-top: -442px;
	-webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 20s infinite linear;
	-ms-animation: rotate 20s infinite linear;
	animation: rotate 20s infinite linear
}
.rankLayer .board-box {
	padding: 50px 10px 10px 10px;
	margin-top: -60px
}
.rank-title {
	width: 90%;
	position: relative;
	z-index: 2
}
.rankTable tr {
	margin-top: 3px
}
.rankTable tr td {
	vertical-align: bottom;
	text-align: center
}
.rankTable tr td:nth-child(1) {
	width: 20%;
	font-weight: bold;
	padding-top: 5px
}
.rankTable tr td.rank-1 {
	background: url(img/num-1.png) no-repeat center center;
	background-size: auto 100%;
	color: #fff
}
.rankTable tr td.rank-2 {
	background: url(img/num-2.png) no-repeat center center;
	background-size: auto 100%;
	color: #fff
}
.rankTable tr td.rank-3 {
	background: url(img/num-3.png) no-repeat center center;
	background-size: auto 100%;
	color: #fff
}
.rankTable tr.currentPlayer td {
	color: #e83737;
	font-weight: bold
}
.rule-cont p {
	padding: 0 15px;
	color: #fff;
	margin-top: 5px;
	font-size: 12px
}
.rule-cont p span {
	font-weight: bold;
	color: #fcdd4f
}
.telLayer .main-cont {
	margin-top: -30px
}
.tel-title {
	width: 90%;
	position: relative;
	z-index: 3
}
.tel-input {
	width: 70%;
	height: 20px;
	line-height: 20px;
	border: 1px solid #ab8a47
}
.telLayer .board-box {
	padding: 50px 10px 10px 10px;
	margin-top: -60px
}
.prize-title {
	width: 90%;
	position: relative;
	z-index: 3
}
.prizeLayer .bkg-layer {
	overflow: hidden
}
.prizeLayer .bkg-light {
	width: 885px;
	height: 885px;
	background: url(../res/resultLayer/result-light.png) no-repeat center center;
	background-size: 100% 100%;
	position: absolute;
	left: 50%;
	margin-left: -442px;
	top: 50%;
	margin-top: -442px;
	-webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 20s infinite linear;
	-ms-animation: rotate 20s infinite linear;
	animation: rotate 20s infinite linear
}
.prizeLayer .board-box {
	padding: 50px 10px 10px 10px;
	margin-top: -60px
}
.ex-title {
	border-bottom: 1px solid #ddd;
	text-align: center;
	color: #e83737;
	font-weight: bold
}
.btn-holder .btn {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}
@media screen and (max-height: 500px) {
.main-cont {
	zoom: 0.8
}
.rule-cont p {
	font-size: 10px
}
}
